<template>
  <div class="box">
    <div class="top">
      <div class="rankingList-top">
        <div class="rankingList-top_item">
          <img src="../assets/icon3/last.png"  @click="$router.push({ name: 'friend' })" class="rankingList-top_img" alt="">
        </div>
        <div class="rankingList-top_item ">

        </div>
        <div class="rankingList-top_item">
          <img src="../assets/icon3/more03.png" class="rankingList-top_img1" alt="">
          <img src="../assets/icon3/play.png" class="rankingList-top_img2" alt="">
        </div>
      </div>
      <div class="rankingList-zhong">

                <img :src="xzq.avatarUrl" alt="" class="portrait">

           <span class="follow">
                <img src="../assets/icon3/payAttentionTo.png" alt="">
           </span>
           <span class="information">
                  <img src="../assets/icon3/email.png" alt="">
           </span>
           <span class="singer">
             <span class="singer-text"> 歌手页</span>
                  <img src="../assets/icon3/next03.png" alt="">

           </span>
      </div>
      <div class="rankingList-xia">
        <p class="name">{{xzq.artistName}}</p>
        <p class="Label">{{xzq.description}}</p>
        <p class="follow-fans">关注 {{xzq.follows}} &nbsp;&nbsp;  粉丝  {{xzq.followeds}}</p>
        <p class="information2">
          <span class="Gender">
            <img src="../assets/icon3/gender.png" alt="">
          </span>
          <span class="Grade">
            <img src="../assets/icon3/lv02.png" alt="">
            <span class="text">{{xzq.gender}}</span>
          </span>
          <span class="position">北京</span>
        </p>
      </div>
      <div class="bg">
        <img :src="xzq.backgroundUrl" alt="">
      </div>
    </div>

    <div class="main">
      <div class="vant">
        <van-tabs v-model="active" sticky animated swipeable
                  line-width="30px"
                  line-height="4px"
                  title-active-color="#C34A3D"
                  title-inactive-color="#535354"
                  >
          <van-tab title="音乐">

              <div class="song">
                <div class="left">
                  歌单(1)
                </div>
                <div class="right">
                  共被收藏{{xzq.playlistBeSubscribedCount}}次
                </div>
              </div>

              <div class="song_content">
                 <div class="listening">
                   <div class="left"></div>
                   <div class="right">
                     <p class="bt">听歌排行</p>
                     <p class="text">积累听歌{{xzq.listenSongs}}首</p>
                   </div>
                 </div>
              </div>
              <div class="song_content">
              <div class="listening">
                <div class="left"></div>
                <div class="right">
                  <p class="bt">薛之谦喜欢的音乐</p>
                  <p class="text">0首,播放24.8万次</p>
                </div>
              </div>
            </div>

              <div class="song">
              <div class="left">
                收藏的歌单(1)
              </div>
              <div class="right">

              </div>
            </div>

              <div class="song_content">
              <div class="listening">
                <div class="left"></div>
                <div class="right">
                  <p class="bt">[华语速爆新歌]最新华语音乐推荐</p>
                  <p class="text">20首,by网易云音乐,播放6.1亿次</p>
                </div>
              </div>
            </div>
            </van-tab>
          <van-tab title="动态" >

            <div class="dynamic_item"  v-for="(item, index) in shareList" :key="index">
              <div class="dynamic_item_left">
                <img :src="xzq.avatarUrl" @click="$router.push({ name: 'JokerXue' })" class="imgAvatar" alt="">
              </div>
              <div class="dynamic_item_right">
                <p class="type">
               <span>
                {{xzq.artistName}}
               </span> 分享{{name[index]}}:</p>
                <div class="time">10月18日</div>
                <div class="describe">{{message[index]}}</div>
                <div class="context_item" @click="goLyrics(index)">
                    <div class="left" >
                      <img :src="imgUrl[index]" alt="" class="left-img">
                    </div>
                    <div class="right">
                      <p class="bt2">{{songlist[index].name}}</p>
                      <p class="text2">{{item.user.nickname}}</p>
                    </div>

                </div>
                <div class="aggregate">
                  <div class="aggregate_item">
                    <img src="../assets/icon2/zan.png" alt="">
                    <span>
                 {{item.info.likedCount}}
                  </span>
                  </div>
                  <div class="aggregate_item">
                    <img src="../assets/video/pinglun.png" alt="">
                    <span>
                {{item.info.commentCount}}
                  </span>
                  </div>
                  <div class="aggregate_item">
                    <img src="../assets/icon/share.png" alt="">
                    <span>
               {{item.forwardCount}}
                  </span>
                  </div>
                  <div class="aggregate_item lastImg">
                    <img src="../assets/icon/more02.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="关于TA">

             <div class="Authentication_information">
               <p class="p1">认证信息</p>
               <p class="p2">
                 <img src="../assets/icon3/vipType.png" alt="">
                 <span class="text">{{xzq.description}}</span>
               </p>
             </div>

            <div class="Personal_information">
              <p class="p1">个人信息</p>
              <p class="p4">等级 :
                <span class="grade2">
            <img src="../assets/account/lv.png" alt="">
            <span class="text">{{xzq.gender}}</span>
                </span>
              </p>
              <p class="p4">性别 :  男</p>
              <p class="p4">地区 :  北京</p>
            </div>

            <div class="Personal_profile">
              <p class="p1">个人简介</p>
              <p class="p5">还没有填写个人介绍</p>
            </div>

          </van-tab>

        </van-tabs>
      </div>

     </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import footer from "@/components/footer/"
  export default {
    name: "my",
    data(){
      return {
       id : this.$route.query.userId,
        xzq : '',
        active : 0,
        shareList: [],
        message: [],
        songlist: [],
        imgUrl: [],
        name: [],
        lyricsid: this.$store.state.lyricsid,
      }
    },
    components: {
      'v-footer': footer,
    },
    computed: {

    },
    methods: {
      goLyrics(index) {
        this.$router.push({ path: '/play', query: { index } });
      },
    },
    created() {

      this.$http.get(`/api/user/detail?uid=${this.id}`).then((res) => {
        this.xzq = res.data.profile;
      });
      this.$http.get(`/api/user/event?uid=${this.id}`).then((res) => {
        this.shareList = res.data.events;
        this.shareList.forEach((item) => {
          // console.log(JSON.parse(item.json));
          this.message.push(JSON.parse(item.json).msg);
          if (JSON.parse(item.json).song) {
            // console.log(JSON.parse(item.json).song);
            this.songlist.push(JSON.parse(item.json).song);
            this.imgUrl.push(JSON.parse(item.json).song.album.blurPicUrl);
            this.name.push('单曲');
            this.$store.state.lyricsid.push(JSON.parse(item.json).song.id);
          } else if (JSON.parse(item.json).mv) {
            this.songlist.push(JSON.parse(item.json).mv);
            this.imgUrl.push(JSON.parse(item.json).mv.imgurl);
            this.name.push('MV');
            this.$store.state.lyricsid.push(JSON.parse(item.json).mv.id);
            // console.log(this.songlist);
          } else {
            this.songlist.push({ name: '不知道', artists: { 0: name } });
            this.imgUrl.push('不知道');
            this.name.push('视频');
            this.$store.state.lyricsid.push('错误');
          }
        });
      });
    },
  }

</script>

<style scoped>
  .box{
    width: 100vw;
    margin-bottom: 100px;

  }
  .top{
    width: 100vw;
    height: 300px;
    position: relative;
    top: 0;
    background:rgba(0,0,0,0.3);
  }
  .bg{
    width: 100vw;
    height: 300px;
    z-index: -1;
    position: absolute;
    top: 0;
  }
  .bg img{
    display: block;
    width: inherit;
    height: inherit;
  }
  .rankingList-top{
    width: 100vw;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #fffdef;

  }
  .rankingList-top_item{
    width: 33vw;
    height: 50px;
    float: left;
  }
  .rankingList-top_img{
    width: 12px;
    display: block;
    margin-top: 14px;
    margin-left: 15px;
  }
  .rankingList-top_img1{
    width: 20px;
    display: inline-block;
    position: absolute;
    top: 25px;
    right: 58px;
  }
  .rankingList-top_img2{
    width: 20px;
    display: inline-block;
    margin-top: 15px;
    margin-left: 80px;
  }
  .rankingList-zhong{
    width: 100vw;
    height: 100px;

    position: relative;
  }
  .portrait{
    width: 70px;
    height: 70px;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    left: 15px;
  }
  .follow,.information,.singer{
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 5px;
    background:rgba(255,255,255,0.3);
    position: absolute;
    top: 36px;
    left: 220px;
  }
  .follow img{
    display: block;
    width: 18px;
    margin-top: 6px;
    margin-left: 8px;
  }
  .information{
    left: 253px;
  }
  .information img{
    display: block;
    width: 18px;
    margin-top: 8px;
    margin-left: 6px;
  }
  .singer{
    width: 75px;
    left: 286px;
  }
  .singer-text{
    display: block;
    font-size: 13px;
    line-height: 30px;
    text-indent: 12px;
    color: #eee9ee;
  }
  .singer img{
    display: block;
    width: 8px;
    position: absolute;
    top: 8px;
    right: 8px;

  }
  .rankingList-xia{
    width: 100vw;
    height: 150px;
  }
  .rankingList-xia .name{
    width: 100vw;
    height: 40px;
    line-height: 40px;
    color: #fffdef;
    font-weight: bold;
    font-size: 19px;
    text-indent: 20px;
  }
  .rankingList-xia .Label{
    width: 100vw;
    height: 20px;
    line-height: 20px;
    color: #e1dfd3;
    font-size: 13px;
    text-indent: 20px;
  }
  .rankingList-xia .follow-fans{
    width: 100vw;
    height: 20px;
    line-height: 20px;
    color: #e1dfd3;
    font-size: 13px;
    text-indent: 20px;
  }
  .rankingList-xia .information2{
    width: 100vw;
    height: 30px;
    position: relative;
  }
  .Gender{
    display: block;
    width: 30px;
    height: 18px;
    background:rgba(100,223,255,0.3);
    border-radius: 45px;
    position: absolute;
    top: 5px;
    left: 20px;
  }
  .Gender img{
    display: block;
    width: 10px;
    margin-top: 3.5px;
    margin-left: 10px;
  }
  .Grade{
    display: block;
    width: 40px;
    height: 18px;
    background:rgba(255,255,255,0.3);
    border-radius: 45px;
    font-size: 12px;
    position: absolute;
    top: 5px;
    left: 54px;
  }
  .Grade img {
    display: block;
    width: 15px;
    margin-top: 3.5px;
    margin-left: 6px;
  }
  .Grade .text{
    display: block;
    width: 15px;
    height: 12px;
    line-height: 12px;
    color: #ebebeb;
    font-size: 11px;
    position: absolute;
    top: 3px;
    left: 16px;
  }
  .position{
    display: block;
    width: 38px;
    height: 18px;
    line-height: 18px;
    background:rgba(255,255,255,0.3);
    border-radius: 45px;
    position: absolute;
    top: 5px;
    left: 98px;
    font-size: 11px;
    color: #e9e9e9;
    text-align: center;
  }

  .main{
    width: 100vw;
    position: absolute;
    top: 50px;

  }
  .vant{
    width: 100vw;
    height: 50px;
    background: #fff;
    position: absolute;
    top: 230px;
    border-radius: 8px 8px 0 0;
    z-index: 1 !important;
   padding-top: 6px;
  }
  .song{
    width: 100vw;
    height: 28px;
    background: #EFEFF0;
    margin-top: 8px;
    color: #78797A;
  }
  .song .left{
    width: 50%;
    height: inherit;
    float: left;
    text-indent: 10px;
    font-size: 12px;
    line-height: 28px;
    color: #78797A;
    overflow: hidden;
  }
  .left-img{
    width: inherit;
    height: inherit;
    display: block;
  }
  .song .right{
    width: 50%;
    height: inherit;
    float: right;
    text-indent: 80px;
    font-size: 12px;
    line-height: 28px;
  }
  .song_content{
    width: 100vw;
  }
  .listening{
    width: 100vw;
    height: 70px;
    padding-top: 2px;
    box-sizing: border-box;
  }
  .listening .left{
    width: 66px;
    height: 66px;
    background: #333333;
    margin-left: 5px;
    border-radius: 5px;
    float: left;

  }
  .listening .right{
    width: 300px;
    height: 68px;
    float: left;
    border-bottom: 1px solid #F6F7F8;
  }
  .bt{
      height:33px;
      font-size: 15px;
      line-height: 60px;
      text-indent: 10px;
      margin-top: 8px;
    }
  .text{
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    text-indent: 10px;
    color: #858687;
  }
  .bt2{
    height:33px;
    font-size: 15px;
    line-height: 30px;
    text-indent: 10px;
  }
  .text2{
    height: 25px;
    line-height: 5px;
    font-size: 12px;
    text-indent: 10px;
    color: #858687;
  }

  .dynamic_item{
    width: 100vw;
    height: 230px;
    border-bottom: 1px solid #E5E5E6;
  }
  .dynamic_item_left{
    width: 55px;
    height: 200px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
  }
  .dynamic_item_right{
    width: 290px;
    height: 200px;
    float: left;
  }
  .imgAvatar{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-top: 10px;
  }
  .type{
    color: #646566;
    height: 50px;
    line-height: 75px;
    font-size: 16px;
  }
  .type span{
    color: #6B89B3;
  }

  .time{
    font-size: 12px;
    color: #969798;
  }
  .context_item{
    width: 300px;
    height: 60px;
    border-radius: 5px;
    margin-top: 5px;
    background: #F1F2F3;
    padding-top: 7px;
    box-sizing: border-box;
  }
  .context_item .left{
    width: 46px;
    height: 46px;
    float: left;
    background: #333333;
    margin-left: 7px;
    border-radius: 5px;
  }
  .context_item .right{
    width: 240px;
    height: 48px;
    float: right;
  }
  .right .bt{
    line-height: 28px;
  }
  .right .text{
    line-height: 3px;
  }
  .describe{
    width: 98%;
    height: 40px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 15px;
    margin-top: 10px;
  }
  .aggregate{
    width: 200px;
    height: 65px;
    line-height: 65px;
    display: flex;
  }
  .aggregate_item{
    flex: 1;
    width: 30px;
    height: 65px;
    font-size: 12px;
    color: #969798;
    margin-right: 60px;
    position: relative;
  }
  .aggregate_item img{
    width: 15px;
    vertical-align: initial;
  }
  .aggregate_item span{
    position: absolute;
    top: -3px;
    left: 20px;
  }
  .lastImg{
    margin-left: 55px;
    margin-top: -5px;
  }

  .Authentication_information{
    width: 100vw;
    height: 80px;
  }
  .p1{
    width: inherit;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-indent: 5px;
    color: #000;
  }
  .p2 img{
    display: block;
    width: 25px;
    margin-left: 5px;
    float: left;
  }
  .p2 .text{
    display: block;
    float: left;
    font-size: 14px;
    color: #5b5c5d;
  }
  .Personal_information{
    width: 100vw;
    height: 120px;
    position: relative;
  }
  .Personal_information .grade2{
    display: block;
    width: 40px;
    height: 17px;
    border: 1px solid #969696;
    border-radius: 45px;
    font-size: 12px;
    position: absolute;
    top: 42px;
    left: 50px;

  }
  .grade2 img{
    display: block;
    width: 16px;
    margin-top: 3.5px;
    margin-left: 7px;
  }
  .grade2 .text{
    display: block;
    width: 15px;
    height: 12px;
    line-height: 12px;
    color: #909090;
    font-size: 11px;
    position: absolute;
    top: 2px;
    left: 16px;

  }

  .p4{
    font-size: 14px;
    color: #3f3f3f;
    text-indent: 5px;
    line-height: 25px;
  }
  .p5{
    font-size: 14px;
    color: #bababa;
    text-indent: 5px;
    line-height: 25px;
  }

</style>
